import React, { useEffect, useState } from 'react'
import { RightOutline } from 'antd-mobile-icons'
import '../style/address.css'
import { useNavigate } from 'react-router-dom'
import { getAddrList } from '../../../api/yjr/yjr_api'

function Address({ id }: any) {
    const navigate = useNavigate()
    const handleAddr = () => {
        navigate('/delivery_address')
    }

    const [addre, setAddre] = useState<any[]>([])

    const getAddDetail = async () => {
        const res = await getAddrList()
        if (res.data.code === 200) {
            setAddre(res.data.addrData)
        }
    }

    useEffect(() => {
        getAddDetail()
    })

    return (
        <>
            {
                addre.map((item: any) => {
                    return (
                        <div key={item._id}>
                            {item.default == true ?
                                <div className='address' onClick={handleAddr}>
                                    <p className='addr-p1'>收货地址</p>
                                    <hr style={{ border: 'none', borderTop: '1px solid #f0f0f0', width: '96%' }} />
                                    <p className='addr-p2'>{item.name}, {item.phone}</p>
                                    <p className='addr-p3'>
                                        <span>{item.addr}</span>
                                        <span className='add-span'><RightOutline /></span>
                                    </p>
                                </div> : null
                            }
                        </div>

                    )
                })
            }

        </>

    )
}

export default React.memo(Address)
